<template>
	<view style="background-color: #FFFFFF;overflow: hidden;" class="vwh">
		<!-- 导航栏 -->
		<view class="navbar w100" :style="{ background: bgcolor }">
			<cu-custom :isBack="true" :showBackIcon="true">
				<block slot="backText">
					<text class="nav-title fs32 white shopro-selector-rect">任务中心</text>
				</block>
			</cu-custom>
		</view>
		<!-- 内容 -->
		<view class="content wh100 df-yc">
			<view class="top-img mt30">
				<image style="width: 690rpx;" :src="temImgUrl+'/zrwljf.png'" mode="widthFix"></image>
			</view>
			<view class="list bs px30 w100">
				<view class="item w100 df-xb" v-for="item in taskList">
					<view class="left df-c">
						<image style="width: 80rpx;" :src="item.image" mode="widthFix"></image>
						<view class="df-y ml20">
							<text class="fs32 fb">{{item.title}}</text>
							<text class="fs22 mt8" style="color: rgba(25, 25, 25, 0.7);">{{item.desc}}</text>
						</view>
					</view>
					<view class="right df-c">
						<text class="fs26 mr20" style="color: #C98E58;">茶多酚+{{item.score}}</text>
						<view
							@click="popupHandle({popup:item.pop_up,type:item.name,status:item.status,qrcode:item.qrcode})"
							:class="{'df-c':true,'button-gray':item.status=='undone'||item.status=='finish','button-active':item.status=='unreceived','fs26':true }">
							{{status[item.status]}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<popup @refresh="refresh" ref='popup'></popup>
	</view>
</template>

<script>
	import popup from './components/popup.vue'
	export default {
		components: {
			popup
		},
		data() {
			return {
				bgcolor: '#ffffff',
				taskList: [],
				temImgUrl: this.$IMG_URL_TEMP,
				status: {
					undone: "去完成",
					unreceived: "领取奖励",
					finish: "已领取"
				}
			}
		},
		created() {
			this.onshow = false
			this.getTask()
		},
		onShow() {
			const that = this
			uni.$on("done", function() {
				console.log("=======done")
				that.getTask()
			})
		},
		methods: {
			popupHandle({
				popup,
				type,
				status,
				qrcode
			}) {
				const that = this
				if (popup && status == 'undone') {
					this.$refs.popup.show(type, qrcode)
				}
				if (status == 'unreceived' && type != 'wx_group') {
					this.$api('user.getscore', {
						name: type
					}).then(res => {
						this.$tools.toast(res.msg)
						this.getTask()
					})
				}
				if (status == 'unreceived' && type == 'wx_group') {
					this.$api('user.getscore', {
						name: type
					}).then(res => {
						this.$tools.toast(res.msg)
						this.getTask()
						setTimeout(function() {
							that.$refs.popup.show(type, qrcode)
						}, 1000);
					})
				}
				if (popup && type == 'wx_group') {
					that.$refs.popup.show(type, qrcode)
				}
				if (type == 'user_data' && status == 'undone') {
					this.jump('/pages/user/userinfo/userinfo')
				}

			},
			refresh() {
				this.getTask()
			},
			getTask() {
				this.$api('user.tackcenter').then(res => {
					this.taskList = res.data
				})
			},
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-title {
		color: #191919;
	}

	.button-active {
		width: 149rpx;
		height: 65rpx;
		background-color: #64222A;
		border-radius: 33rpx;
		color: #FFFFFF;
	}

	.button-gray {
		width: 149rpx;
		height: 65rpx;
		background: #F1F1F1;
		border-radius: 33rpx;
		color: rgba($color: #191919, $alpha: 0.7)
	}

	.item {
		margin-top: 60rpx;
	}
</style>
